<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>
<script src="src/layuiadmin/js/jquery-1.8.2.js"></script>
</head>
<body>


	<div class="demoTable">
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		
		<select name="categoryid" lay-filter="required"id="selectID">
                    <option value="1">公司新闻</option>
                    <option value="2">行业新闻</option>
                    <option value="3">瓷砖新闻</option>     
        </select>
        <button class="layui-btn" data-type="reload">搜索</button>
		</div>
	<table id="demo" lay-filter="test"></table>
	<script>
	
	
	 layui.use('laydate', function(){
	        var laydate = layui.laydate;
	      //执行一个laydate实例
	      laydate.render({
	    elem: '#test1' //指定元素
	  });
	});
		layui.use([ 'table', 'layer', 'form' ], function() {
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;

			//第一个实例
			table.render({
				elem : '#demo',
				height : 600,
				url : 'XWchanxun', //数据接口

				page : true, //开启分页
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',

					sort : true,
					fixed : 'left'
				}, {
					field : 'categoryid',
					title : '分类'

				},{
					field : 'biaoti',
					title : '标题',
				},{
					field : 'neirong',
					title : '内容',
				}, {
					field : 'shijian',
					title : '时间',
					sort : true
				}
				,{
					fixed : 'right',
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				] ]
			});
			
			 var $ = layui.$, active = {
			         reload: function(){
			           var demoReload = $('#demoReload');

			           //执行重载
			           table.reload('demo', {
			             page: {
			               curr: 1 //重新从第 1 页开始
			             }
			             ,where: {
			                id:$("#demoReload").val(),
			                categoryid:$("#selectID").val(),
			             }
			           });
			         }
			       };
			       
			       $('.demoTable .layui-btn').on('click', function(){
			         var type = $(this).data('type');
			         active[type] ? active[type].call(this) : '';
			       });
			   

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {

				//自定义头工具栏右侧图标 - 提示
				case 'add':
					layer.open({
						type : 1, //Page层类型
						area : [ '500px', '500px' ],
						title : [ '新增资讯信息', 'font-size:18px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : $("#addForm"), //弹窗路径
						success : function(layero, index) {

						}

					});

					

					layui.use('laydate', function() {
						var laydate = layui.laydate;

						//执行一个laydate实例
						laydate.render({
							elem : '#test1' //指定元素
						});
					});

					layui.use('form', function() {
						var form = layui.form;

						//各种基于事件的操作，下面会有进一步介绍
						form.on('submit(btn)', function(data) {
							console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
							console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
							console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
							//alert("hi");
							data.field.imgurl = $("#imgUrl2").attr("src");
							$.ajax({
								url : "add",//地址
								type : "get",//请求方式
								data : data.field//参数
								,
								success : function(res) {//成功以后的回调函数

									if (res == 1) {
										alert("ok");
									} else {
										alert("no");
									}
								}

							});

							return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});

					});
					break;
				}
				;
			});

			//监听工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				console.log(data);
				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						//写对应ajax
						$.ajax({
							url : "XWDeleteServlet",//地址
							type : "get",//请求方式
							data : {id:data.id
							},
							success : function(res) {//成功以后的回调函数
								if (res == 1) {
									alert("删除成功！");
								window.location.reload();
								} else {
									alert("删除失败！");
								}
							}
						});
					});
				} else if (layEvent === 'edit') { //编辑
					//do something
					layer.open({
						type : 1, //Page层类型
						area : [ '500px', '500px' ],
						title : [ '编辑资讯信息', 'font-size:18px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : $("#updateForm"), //弹窗路径
						success : function(layero,index) {
							$('#id').val(data.id);
							$('#categoryid').val(data.categoryid);
							$('#biaoti').val(data.biaoti);
							$('#neirong').val(data.neirong);
							$('#shijian').val(data.shijian);
						},

					});
					

					layui.use([ 'laydate', 'form' ], function() {
						var laydate = layui.laydate;
						var form = layui.form;
						//执行一个laydate实例
						laydate.render({
							elem : '#createdate' //指定元素
						});
						$.ajax({
						    url:'XWfenleichaxun',//数据接口
						    dataType:'json',
						    type:'get',
						    success:function(res){
						    	
						    	$.each(res.data,function(index,value){
						    		$('#selectID').append("<option value="+value.id+">"+value.fenlei+"</option>");//往下拉菜单里添加元素
						    	})

								form.render();//菜单渲染 把内容加载进去
							}
						})
						form.on('submit(btn)', function(data) {
							console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
							console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
							console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

							//data.field.imgurl = $("img").attr("src");

							//写对应ajax
							$.ajax({
								url : "XWUpDateServlet",//地址
								type : "get",//请求方式
								data : data.field,
								success : function(res) {//成功以后的回调函数
									if (res == 1) {
										alert("修改成功！");
										//window.location.reload();
									} else {
										alert("修改失败！");
									}
								}
							});

							return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});

					});
				}
			});

		});
	</script>

	
	<!-- 行内工具栏 -->
	<script type="text/html" id="barDemo">
 	    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
     
	<!-- 编辑表单 -->
	<div id="updateForm" style="display: none">
		<form class="layui-form" lay-filter="updateform">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">资讯编号</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input" id="id" disabled="disabled">
				</div>
			</div>
		 
		
			<div class="layui-form-item">
            <label class="layui-form-label">资讯分类</label>
            <div class="layui-input-block">
            <select name="categoryid" lay-filter="fenlei">
            <option value="1">证券变动月报表</option>
            <option value="2">通报，公布及公函</option>
            <select name="categoryid" lay-filter="fenlei"id="selectID">
            </select>
            </div>
            </div>
		
            
           <div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input type="text" name="biaoti" placeholder="请输入"
						autocomplete="off" class="layui-input" id="title">
				</div>
			</div>
            
            <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">内容</label>
          <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="neirong"></textarea>
            </div>
            </div>
            
            <div class="layui-form-item">
				<label class="layui-form-label">时间</label>
				<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test1" name="shijian">
                </div>
			</div>
      
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>


	<!-- 添加表单 -->
	<div id="updateForm" style="display: none">
		<form class="layui-form" lay-filter="updateform">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">资讯编号</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input" id="id" disabled="disabled">
				</div>
			</div>
		 
			
			<div class="layui-form-item">
            <label class="layui-form-label">资讯分类</label>
            <div class="layui-input-block">
            <select name="categoryid" lay-filter="fenlei">
            <option value="1">证券变动月报表</option>
            <option value="2">通报，公布及公函</option>
            <select name="categoryid" lay-filter="fenlei"id="selectID">
            </select>
            </div>
            </div>
            
           <div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input type="text" name="biaoti" placeholder="请输入"
						autocomplete="off" class="layui-input" id="title">
				</div>
			</div>
            
            <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">内容</label>
          <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="neirong"></textarea>
            </div>
            </div>
            
            <div class="layui-form-item">
				<label class="layui-form-label">时间</label>
				<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test1" name="shijian">
                </div>
			</div>
      
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>


</body>

</html>